<template>
  <div style="height: 400px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/dashboard' }">工作台</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{$t('message.welcome')}}{{$t('message.title')}}</span>
          </div>
          <div style="height: 150px;color:#606266;">
            <div class="demo-color-box bg-blue">{{$t('message.description')}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" style="padding: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>强大的角色权限管理</span>
          </div>
          <el-carousel height="150px">
            <el-carousel-item >
              <div style="width: 100%;text-align: center" class="bg-info">
                <h2>自定义菜单，权限，角色和用户</h2>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="width: 100%;text-align: center" class="bg-success">
                <h2>菜单，api的访问权限控制</h2>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div style="width: 100%;text-align: center" class="bg-warning">
                <h2>多角色灵活切换</h2>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="16" :xl="8" style="padding: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>内置功能</span>
          </div>
          <div style="height: 150px;color:#606266;">
            <el-tag type="success">用户管理</el-tag>
            <el-tag type="warning">角色管理</el-tag>
            <el-tag type="info">权限管理</el-tag>
            <el-tag type="danger">部门管理</el-tag>
            <el-tag>国际化</el-tag>
            <el-tag type="success">数据字典管理</el-tag>
            <el-tag type="warning">部门管理</el-tag>
            <el-tag type="info">文件管理</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: 'dashboard',
    data() {
      return {
        loading: false,
      }
    },
    async created() {
      // this.takeLongTime().then(value => {
      //    console.log(value)
      //  })
    },
    methods: {
      async takeLongTime() {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve("long_time_value")
          }, 1000)
        })
      },
      async takeLongTime1() {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve("long_time_value")
          }, 1000)
        }, reject => {
          reject("error")
        })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .bg-blue {
    background-color: #409eff;
  }

  .bg-success {
    background-color: #67c23a;
  }

  .bg-warning {
    background-color: #e6a23c;
  }

  .bg-danger {
    background-color: #f56c6c;
  }

  .bg-info {
    background-color: #909399;
  }

  .demo-color-box {
    border-radius: 4px;
    padding: 10px;
    height: 54px;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-carousel__item h2 {
    color: #475669;
    font-size: 20px;
    opacity: 0.75;
    line-height: 160px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
